<script setup lang='ts' name="org-role-add">
import { addOrgRoles, getPrivileges } from '@fl/api/iam-api'
import { ElButton, ElCard, ElForm, ElFormItem, ElInput, ElInputNumber, ElOption, ElSelect } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const org_id: any = window.sessionStorage.getItem('ORG_ID')
const privileges = ref<any>([])
const formRef = ref()
const form = ref<any>({
    description: '',
    display_name: '',
    privileges: [],
    sort_num: 0,
})

const rules = {
    description: [
        {
            message: '请输入描述',
            required: true,
        },
    ],
    display_name: [
        {
            message: '请输入名称',
            required: true,
        },
    ],
}

async function handleSubmit() {
    await formRef.value.validate((valid, fields) => {
        if (valid) {
            addOrgRoles({ ...form.value, org_id }).then((res: any) => {
                console.log(res)
                goBack()
            })
        }
        else { console.log('error submit!', fields) }
    })
}

function goBack() {
    router.push('/admin/org-role')
}

function init() {
    getPrivileges({ org_id }).then((res: any) => {
        privileges.value = res.items
    })
}
init()
</script>

<template>
    <div style="width: 100%;height: 100vh;">
        <ElCard style="width: 100%;height: 100%;"
                class="mb-20"
        >
            <div mb-40>
                <ElButton @click="goBack">
                    返回列表
                </ElButton>
            </div>

            <ElForm ref="formRef"
                    :model="form"
                    :rules="rules"
                    style="max-width: 600px"
                    label-width="auto"
            >
                <ElFormItem label="权限名称"
                            prop="display_name"
                >
                    <ElInput v-model="form.display_name"
                             placeholder="请输入"
                    />
                </ElFormItem>

                <ElFormItem label="权限集合"
                            prop="privileges"
                >
                    <ElSelect v-model="form.privileges"
                              multiple
                              placeholder="请选择"
                    >
                        <ElOption v-for="item in privileges"
                                  :key="item.id"
                                  :label="item.display_name"
                                  :value="item.code"
                        />
                    </ElSelect>
                </ElFormItem>

                <ElFormItem label="权限描述"
                            prop="description"
                >
                    <ElInput v-model="form.description"
                             type="textarea"
                    />
                </ElFormItem>

                <ElFormItem label="排序号"
                            prop="sort_num"
                >
                    <ElInputNumber v-model="form.sort_num"
                                   :precision="0"
                                   :step="1"
                    />
                </ElFormItem>

                <div style="text-align: center;">
                    <ElButton type="primary"
                              @click="handleSubmit"
                    >
                        保存
                    </ElButton>

                    <ElButton @click="goBack">
                        取消
                    </ElButton>
                </div>
            </ElForm>
        </ElCard>
    </div>
</template>

<style lang="less" scoped>

</style>
